<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
$params = $this->params;
$info = 0;
?>
<style>	
#h-menu-g {
    position: relative;
    top: 0;
}

body.horizontal #header {
    height: 260px !important;
}

#h-menu-g2 {
    position: relative;
    top: 20px;
}
#wrapper {
    clear: both;
    padding: 18px 0 18px 15px;
}
body.horizontal #header {
    height: 101px !important;
}

.wrap {
    position: relative;
    right: 0;
    top: 0;
    float: right;
}

#search {
    float: left;
    padding: 7px 10px 0;
    position: relative;
}

#search #text_search {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    height: 25px;
    vertical-align: middle;
    width: 300px;
}
#search .img_search {
    position: absolute;
    right: 15px;
    top: 14px;
}
#category {
    background: none repeat scroll 0 0 #F8F8F8;
    border-right: 1px solid #DDDDDD;
    float: left;
    height: 25px;
    padding: 8px 10px 12px;
    position: relative;
}

#category select {
    background-color: #FFFFFF;
    background-image: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    height: 30px;
    padding: 5px;
    width: 200px;
}
.column {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    float: left;
    margin: 0 10px 10px 0;
    width: 210px;
}

.column .body {
    background: none repeat scroll 0 0 #FFFFFF;
}

.column p {
    line-height: 1.2em;
    padding: 0 10px;
}
.column .img {
    padding: 10px 10px 0;
    text-align: center;
}


.column h2 {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2em;
    padding: 10px;
}

a:link, a:visited {
    color: #000000;
    text-decoration: none;
}

.column .img img {
    height: auto !important;
    width: 190px;
}

.column .stats {
    color: #999999;
    font-size: 80%;
    margin-bottom: 5px;
}

.column .desc {
    color: #333333;
    cursor: pointer;
    font-size: 90%;
    margin-bottom: 10px;
}

.column .tools {
    background: none repeat scroll 0 0 #F6F6F6;
    border-top: 1px solid #EFEFEF;
    font-size: 0.8em;
    padding: 10px;
}
a.vote {
    background: url("templates/wonder/images/icon_thumbup.gif") no-repeat scroll 0 0 transparent;
    color: #114477;
    cursor: pointer;
    margin: 0 5px 0 1px;
    padding: 0 0 0 15px;
}

a.comment {
    border-left: 1px solid #DDDDDD;
    color: #114477;
    cursor: pointer;
    margin: 0 5px 0 1px;
    padding: 0 0 0 5px;
}

</style>

<div style="clear:both;">
		<div id="content2" style="position:relative;min-height:400px;">
			<div class="wrap">
    
				<div id="search">
					<input type="text" value="" name="text_search" id="text_search"><input type="image" style="border-width:0px;" onclick="return CheckSearch();" src="templates/wonder/images/icon_search.gif" class="img_search" id="ctl00_ctlHeader_ctlSearch_btSearch" name="ctl00$ctlHeader$ctlSearch$btSearch">
				</div>

					
				<div id="category">
					<select id="ddlCategories" name="ddlCategories">
					<?php 
					foreach($this->_items as $k=> $item){
						$seleted_it = '';
						if(empty($this->subID)){
	
							$this->subID = $item->id;
							$this->document->setTitle($this->title . ' - '.$item->title.' - '. $this->sitename);
						}else
						{
							if($this->subID == $item->id) {								
								$this->document->setTitle($this->title . ' - '.$item->title.' - '. $this->sitename);
								$seleted_it = 'selected="selected"';
							}
						}
					?>
					<option value="<?php echo $item->id;?>" <?php echo $seleted_it?>><?php echo $item->title;?></option>
					<?php }?>

				</select>
				</div>

			</div>
			<div id="wrapper" style="position: relative; overflow: hidden; height:500px;" class="isotope">
			<?php 
			$w = 15;
			$h = 18;	
			foreach($this->items as $subitem){
				$subtitle = $this->escape($subitem->title);
				$img = json_decode($subitem->images);				
				$desc = JHtml::_('string.truncate', $subitem->introtext, $params->get('introtext_limit'));
				$url = JURI::base().'index.php?option='.$this->option.'&Itemid='.$this->itemID.'&Subid='.$this->subID.'&article_id='.$item->id.'&view=chitiet';
				
			?>
				<div class="column isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate(15px, 18px);">
				<div class="body">
					<?php if(!empty($img->image_intro)){?>
					<p style="display: block" class="img"><a href="" rel="nofollow" id="" target="_blank"><img width="240" border="0" alt="<?php echo $img->image_intro_alt;?>" src="<?php echo $img->image_intro;?>"></a></p>
					<?php } ?>
					<h2><a rel="" href="http://www.baomoi.com/Home/TheGioi/www.tienphong.vn/Thanh-chien-tinh-duc-o-Syria/11988366.epi" target="_blank"><?php echo $subtitle;?></a></h2>
					<p class="stats">
						<span class="source">
							Published</span> : 
						<span class="time">
							<?php echo $subitem->publish_up;?></span><!--&nbsp;<span class="related"><a href="http://www.baomoi.com/Group/9712394.epi">6 liên quan</a></span>--></p>
					
						<p onclick="openNewWindow('');" style="display: block" class="desc"><?php echo $desc;?></p>
					
				<!--<p class="tools">
					<a rel="nofollow" class="vote" id="Norate_11988366" vote="true">1 bình chọn</a>
					<a target="_blank" href="http://www.baomoi.com/Thanh-chien-tinh-duc-o-Syria/119/11988366.epi" class="comment" id="Comment_11988366">Bình luận</a>
				</p>-->
				</div><!-- .body-->
			</div><!-- .column-->
			<?php } ?>
			</div>
			
		<div class="clear"></div>
	</div><!-- end #wrapper -->
	<div class="clear"></div>
	
	<script type="text/javascript">
		$(".pagination").find("a").each(function() {
		//var g = window.location.href.slice(window.location.href.indexOf('?'));
		var href = $(this).attr('href').replace("/component/tintuc/?","/?option=com_tintuc&");
		$(this).attr('href', href);
	});
	$( document ).ready(function() {
		var w = [15,235,455,675];
		var h = [18,18,18,18];
		var i = 0;
		var stt = 1;
		var max_height = 500;
		$("#wrapper .column").each(function(){			
			//tinh chiu cao
			if(stt > 4){
				var el = $("#pibien"+(stt-4));
				var position = el.position();
				var h_new = el.height() + position.top;
				if(h_new > max_height) max_height = h_new;
				h[stt%4-1] +=  h_new;
				console.log(h);
			}
			$(this).css("transform","translate("+w[i]+"px,"+h[i]+"px)");
			$(this).attr("id","pibien"+stt);
			if(i==3) i=0;
			else i++;			
			//if(w > 6*220) w=18;
			stt++;
		});
		$("#wrapper").css("height",max_height+"px");
	});
	</script>